传说Echart 4.0版本支持在 PPT 里使用 ECharts！

题图来自ECharts 全新大版本 4.0 正式发布！该文中提到：

在 PPT 中插入 ECharts 一直是许多PPTer反馈最多的需求，如今，终于可以在 PPT 里使用 ECharts 了！你可以在 Gallery 里创建你自己的图表作品后保存。然后在 PPT 里插入 ECharts 组件，选择你刚保存的图表，马上你就可以在 PPT 里拥有一个丰富的样式，动画和交互的图表展示了！ …… 目前该插件已经在等待微软商店审核，相信不需要多久，用户进行该功能的试用。

上文编辑于2018-1-19，如今将近一年过去了，似乎PPT插入ECharts组件的功能并没有出现。 又到年关，想必无数的年终总结PPT正在酝酿与展示中吧。想说的是，想要在PowerPoint中用上ECharts的交互功能和可视化效果，倒也不算是特别难的事。 说到底，ECharts完成的是数据可视化的动态网页，因此要在PPT中演示ECharts，只需要用到Web Viewer加载项或是WebBrowser控件加载网页即可。

在PPT中插入ECharts互动图表，第一个可选的方法是利用PowerPoint自带的Web Viewer加载项。这里以ECharts Gallery中用户上传的“地图时间轴多样”为例加以演示。 相比起待会要介绍的其步骤为： 插入 → 我的加载项 → Web Viewer → 调整至合适的尺寸 → 输入网址并预览 → 搞定！

Web Viewer加载网页 使用Web Viewer的方法相对比较省心，网页显示的效果好，也不用考虑PowerPoint信任中心的宏设置、Active设置等；Web Viewer只支持https网址的网页，但其实这也不是大问题。如前面演示中用到的ECharts Gallery，或是GitHub等常用的平台，其实都是https网址。 在本人的Win10 + PowerPoint2016中使用正常，但换到另外一台Win7 + PowerPoint2016无法正常显示EChart可视化图表。这是因为Internet Explorer渲染ECharts容易出现问题，用Chrome内核渲染ECharts没有任何问题，但IE浏览器对ECharts的支持不是很完美。echarts兼容IE浏览器的问题提到的解决方案：一是选用ECharts2版本（3以下），二是自己在编辑ECharts可视化图表时，在页面title标签下加上一句：

第一个方法用低版本的EChart没去试了，这里提到的第二个方法，其实在使用WebBrowser 控件加载ECharts网页时也是需要添加这么一句的。当然，如果插入PPT中的是别人的数据可视化网页，可能就没办法了。 此外，在使用过程中还发现，Web Viewer的最大尺寸有限制，当PPT的尺寸设置的过大时，Web Viewer无法缩放到全屏显示。

在PPT中插入ECharts网页的第二种方法，是利用WebBrowser控件，具体步骤参见在 PowerPoint 2016 中嵌入网页和如何在ppt中插入html动态图表，此处不再赘述。 插入WebBrowser控件的实现方式中的几个关键步骤包括：

其中的11000 (0x2AF8)表示的Internet Explorer 11，改成其它的版本也可以，如10000 (0x2710)：Internet Explorer 10，8888 (0x22B8) IE8…… 不想去修改注册表的话，也可以采用和刚才Web Viewer同样的方法，在html文件中加上IE 兼容性标记X-UA-Compatible设置WebBrowser解析网页时使用的文档模式，实现 IE 浏览器版本模拟。

参考资料中对于WebBrowser控件的使用方法介绍得很详细，这里只补充下两点。

务必加兼容性标识语句否则WebBrowser可能无法正常显示

点击按钮加载网页

PPT翻页自动加载网页

WebBrowser加载本地动态网页实现效果

如前所述，WebBrowser对于ECharts的图表可能会出现无法正常渲染的情况，提示“请升级您的浏览器”，如下图所示。

WebBrowser无法打开网页

所以如果可以接受的话，在注册表中加入相应的键值可能更保险一点，出现类似上图这种提示升级浏览器的情况的机率会稍少一点。

如果仔细看前述Gif动画中，加载本地的“堆叠区域图”网页，会发现和浏览器（Chrome、IE、Edge）显示的效果相比，PPT中WebBrowser控件显示的网页，字体明显偏小。 出现这一情况的原因，在于我们从ECharts 官方示例下周的示例html文件，对于字体大小都是默认设置，并未专门指定：如坐标轴中的字体大小默认为12。 当使用Chrome浏览器查看示例文件时自动进行了缩放，但在WebBrowser控件中却并没有。比如在本人新建16:9的ppt文件中插入WebBrowser控件，将控件尺寸缩放至PPT页面大小，此时控件尺寸是（Height：1080，Width：1920）。演示PPT文稿时，全屏时屏幕分辨率变大（2540×1440），WebBrowser又没有相应的缩放显示比例，此时仍然按照默认的字体大小就显得明显偏小了。

fontSize默认设置显示效果

不知道如何去调整WebBrowser控件的网页显示比例，所以采用了一个变通的办法：将ECharts中的字体大小设置为自动缩放来解决这一问题，参见参考资料Echarts 文字大小随页面宽度变化一文中的思路。 需要注意的是，参考资料中提到的读取页面宽度的语句有误

需改为

ECharts中的字体大小随页面宽度自动调整

上图中的1920就是PPT文件中WebBrowser控件尺寸，大家按照实际情况修改即可。 如此修改后的显示效果如图所示。

fontSize autoscale

这样做还有一个优点就是，对于多显示器演示PPT时不用考虑投影分辨率的影响。比如本人习惯在PPT播放过程中使用“演示者视图”，使用页面宽度调整fontSize的方法，无论那个显示器作为主显示器，都不会出现字体太大挤作一团，或是字体偏小无法看清的这些问题。 选作示例的ECharts比较简单，更为复杂的图表，无非是按照同样的思路，对相应的fontSize进行设定就是。只不过需要注意各个元素的字体大小选项所在的位置可能会有不同，如上图中坐标轴的字体大小，具体的设定可以查下ECharts的配置项手册就是。建议不妨还可以按照参考资料12中的方法，将resize()也加上就更完美了。 比较而言，就可以看出Web Viewer确实是要省心多了，也不用担心什么网页显示比例，也不用去修改注册表之类。 啰嗦了这么多，其实都是因为想把ECharts动态图表非要用PowerPoint来演示给弄的。照我看来，直接拿Chrome浏览器来查看动态图表最省事。 不过也知道，虽然亚马逊、美团、包括美国陆军训练与条令司令部（UATDOC: U.S. Army Training and Doctrine Command）在内的众多公司（集团）对PPT嗤之以鼻，还是会有众多的大小领导们会将PowerPoint奉为圭璧，甚至把做PPT当成员工们的福报也说不定吧。所以抱怨归抱怨，PPT还得做。 当然了，也许真如一年前的新闻中所言，ECharts发布新版本完美支持PPT，应该就不存在这些问题了。我们拭目以待就是。没出来这些功能之前，不妨先用本文中的方法来试试看。

ECharts的功能强大，一定要想在PPT中插入ECharts（或其它）动态图表的话，可以采用Web Viewer加载项和WebBrowser控件来实现；

Web Viewer加载项的方法相对简单，但只支持https网址；

WebBrowser控件更加灵活，但需要按照前述提到的注意事项，按部就班不能马虎；

将ECharts图表中的字体大小修改为按网页宽度自动调整，显示效果更好；

没有PPT就没有伤害。